<script setup lang="ts">
import HeadLayout from '@/layouts/head/index.vue'
import FooterLayout from '@/layouts/footer/index.vue'
import { headHeight } from '@/config/modules/styles.ts'
</script>

<template>
  <div class="layout-page">
    <HeadLayout class="head" />
    <main>
      <div class="content">
        <RouterView />
      </div>
      <div class="footer">
        <FooterLayout />
      </div>
    </main>
  </div>
</template>

<style scoped>
.layout-page {
  width: 100vw;
  height: 100vh;
  background-color: var(--base-bg);
  overflow: hidden;
}

.head {
  height: v-bind(headHeight+ "px");
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

main {
  height: calc(100vh - v-bind(headHeight + "px"));
  overflow-y: auto; /* 仅在需要时显示滚动条 */
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    padding: 20px;
  }

  .footer {
    height: 80px;
    background-color: white;
    flex-shrink: 0; /* 防止 footer 被压缩 */
  }
}
</style>
